<template>
  <div ref="home" class="home">
    <!-- @touchmove.prevent -->
    <!-- 品牌数据 -->
    <div v-for="(value, key, index) in BrandList" :key="index">
      <h4 :ref="'side' + key">
        {{ key }}
      </h4>
      <ul class="oul">
        <li
          v-for="item in value"
          @click.stop="showMark(item.MasterID)"
          :key="item.MasterID"
        >
          <img :src="item.CoverPhoto" alt="" />
          <span>
            {{ item.Name }}
          </span>
        </li>
      </ul>
    </div>
    <!-- 侧边栏 -->
    <SideBar :letter="$refs"/>
      <!-- 弹框 -->
    <PopUp v-if="isShowMark" @close="(flag) => isShowMark = flag" :groupList="groupList"/>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getMasterBrandId } from "../api/brand";
import SideBar from '../components/SideBar.vue'
import PopUp from '../components/Popup.vue'

export default {
  name: "Home",
  components: {
    SideBar,
    PopUp
  },
  data() {
    return {
      flag: false,
      text: "",
      // 控制弹框显示隐藏
      isShowMark: false,
      // 品牌下车系
      groupList: [],
    };
  },
  computed: {
    ...mapState(["BrandList", "initBrand"]),
  },
  methods: {
    ...mapActions(["initBrandFn"]),
        // 展示弹框
    showMark(MasterID) { 
      this.isShowMark = true;
      getMasterBrandId({
        MasterID,
      }).then((res) => {
        this.groupList = res;
      });

    },
  },
    created() {
    this.initBrandFn();
  }
}

</script>

<style scoped>
.home{
    height: 100%;
}
.home h4 {
  height: 17px;
  color: #666;
  font-size: 14px;
  background: #f4f4f4;
  padding-left: 15px;
  line-height: 17px;
  margin: 0;
}
.oul {
  margin: 15px;
}

.oul li {
    height: 50px;
    width: 94%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    border-bottom: 1px solid #ccc;
}

.oul li img {
  height: 35px;
  width: 35px;
}
.oul li span {
  font-size: 12px;
  margin-left: 20px;
}

</style>
